<template>
  <view class="bg-gray-50 w-[750rpx] pb-[150rpx] box-border">
    <!-- 顶部导航 -->
    <view class="bg-gradient-to-r from-blue-600 to-blue-800 text-white p-[30rpx] sticky top-0 z-100 flex justify-between items-center shadow-lg">
      <IconFont name="arrow-left" class="text-[40rpx] cursor-pointer" @click="handleBack" />
      <text class="text-[36rpx] font-bold flex-1 text-center">每日签到打卡</text>
      <IconFont name="history" class="text-[36rpx] cursor-pointer" @click="handleHistory" />
    </view>

    <!-- 签到卡片 -->
    <view class="bg-white rounded-[25rpx] p-[40rpx] m-[30rpx] shadow-lg">
      <view class="text-[34rpx] font-bold text-gray-800 mb-[30rpx] flex items-center">
        <IconFont name="map-marker-alt" class="text-blue-500 mr-[15rpx]" />
        <text>今日签到任务</text>
      </view>
      
      <view class="flex justify-between mb-[30rpx]">
        <view class="bg-gray-50 rounded-[20rpx] p-[25rpx] flex-1 mx-[10rpx] text-center">
          <text class="text-[26rpx] text-gray-500 mb-[10rpx] block">任务名称</text>
          <text class="text-[30rpx] font-bold text-gray-800">早班打卡</text>
        </view>
        <view class="bg-gray-50 rounded-[20rpx] p-[25rpx] flex-1 mx-[10rpx] text-center">
          <text class="text-[26rpx] text-gray-500 mb-[10rpx] block">签到时间</text>
          <text class="text-[30rpx] font-bold text-gray-800">08:00-09:00</text>
        </view>
        <view class="bg-gray-50 rounded-[20rpx] p-[25rpx] flex-1 mx-[10rpx] text-center">
          <text class="text-[26rpx] text-gray-500 mb-[10rpx] block">今日积分</text>
          <text class="text-[36rpx] font-bold text-gray-800">+10</text>
        </view>
      </view>
      
      <view class="bg-yellow-50 border-l-5 border-yellow-400 p-[20rpx] rounded-[10rpx] mb-[20rpx] text-[28rpx] text-gray-600 flex items-center">
        <IconFont name="exclamation-circle" class="text-yellow-400 text-[36rpx] mr-[15rpx]" />
        <text>请在规定时间内到达指定地点签到，迟到将减少积分奖励</text>
      </view>
      
      <view class="h-[400rpx] bg-gray-200 rounded-[20rpx] mb-[20rpx] relative overflow-hidden">
        <image 
          src="https://api.mapbox.com/styles/v1/mapbox/streets-v11/static/108.3200,22.8200,14/750x400?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4M29iazA2Z2gycXA4N2pmbDZmangifQ.-g_vE53SD2WrJ6tFX7QHmA"
          class="w-full h-full object-cover"
        />
        
        <view class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-full w-[40rpx] h-[40rpx] bg-blue-500 rounded-full border-3 border-white shadow-lg"></view>
        
        <view class="absolute top-[40%] left-[60%] transform -translate-x-1/2 -translate-y-full">
          <IconFont name="bullseye" class="text-[50rpx] text-red-500" />
        </view>
        
        <view class="absolute bottom-[20rpx] left-[20rpx] bg-white bg-opacity-90 px-[25rpx] py-[15rpx] rounded-[50rpx] text-[28rpx] font-bold text-gray-800 flex items-center">
          <IconFont name="location-arrow" class="text-blue-500 mr-[10rpx]" />
          <text>距离签到点：{{ distance }}米</text>
        </view>
      </view>
      
      <view class="text-center mb-[40rpx]">
        <nut-button 
          type="primary" 
          size="large"
          :disabled="!canSignIn"
          class="px-[80rpx] py-[30rpx] text-[36rpx] font-bold"
          :class="canSignIn ? 'bg-green-500' : 'bg-gray-400'"
          @click="handleSignIn"
        >
          <IconFont name="check-circle" class="mr-[15rpx]" />
          {{ signButtonText }}
        </nut-button>
        <text class="text-center text-[26rpx] text-gray-600 mt-[20rpx] block">
          请确保您已到达<text class="text-red-500 font-bold">南宁市青秀区金湖广场</text>附近
        </text>
      </view>
    </view>

    <!-- 签到记录 -->
    <view class="bg-white rounded-[25rpx] p-[40rpx] m-[30rpx] shadow-lg">
      <view class="flex justify-between items-center mb-[30rpx]">
        <text class="text-[34rpx] font-bold text-gray-800">签到记录</text>
        <nut-button 
          type="default" 
          size="small"
          class="px-[25rpx] py-[15rpx] text-[26rpx] bg-blue-50 text-blue-500"
          @click="handleFilter"
        >
          <IconFont name="filter" class="mr-[10rpx]" />
          本周
        </nut-button>
      </view>
      
      <view class="max-h-[500rpx] overflow-y-auto">
        <view 
          v-for="(record, index) in signRecords" 
          :key="index"
          class="flex py-[25rpx] border-b border-gray-100"
        >
          <view class="w-[70rpx] h-[70rpx] rounded-full bg-green-50 flex items-center justify-center text-[30rpx] text-green-500 mr-[25rpx] flex-shrink-0">
            <IconFont :name="record.success ? 'check' : 'times'" />
          </view>
          <view class="flex-1">
            <text class="text-[30rpx] font-bold text-gray-800 mb-[10rpx] block">{{ record.title }}</text>
            <view class="flex text-[26rpx] text-gray-600">
              <view class="flex items-center mr-[20rpx]">
                <IconFont name="clock" class="mr-[8rpx]" />
                <text>{{ record.time }}</text>
              </view>
              <view class="flex items-center">
                <IconFont name="map-marker-alt" class="mr-[8rpx]" />
                <text>{{ record.location }}</text>
              </view>
            </view>
          </view>
          <text 
            class="text-[26rpx] font-bold self-center"
            :class="getStatusColor(record.status)"
          >
            {{ record.status }}
          </text>
        </view>
      </view>
      
      <!-- 签到统计 -->
      <view class="flex justify-between mt-[30rpx]">
        <view class="bg-gray-50 rounded-[20rpx] p-[25rpx] flex-1 mx-[10rpx] text-center">
          <text class="text-[40rpx] font-bold text-blue-500 mb-[10rpx] block">85%</text>
          <text class="text-[26rpx] text-gray-600">签到率</text>
        </view>
        <view class="bg-gray-50 rounded-[20rpx] p-[25rpx] flex-1 mx-[10rpx] text-center">
          <text class="text-[40rpx] font-bold text-blue-500 mb-[10rpx] block">6</text>
          <text class="text-[26rpx] text-gray-600">连续签到</text>
        </view>
        <view class="bg-gray-50 rounded-[20rpx] p-[25rpx] flex-1 mx-[10rpx] text-center">
          <text class="text-[40rpx] font-bold text-blue-500 mb-[10rpx] block">120</text>
          <text class="text-[26rpx] text-gray-600">总积分</text>
        </view>
      </view>
      
      <!-- 签到统计图表 -->
      <view class="h-[300rpx] mt-[30rpx] bg-gray-50 rounded-[20rpx] p-[20rpx] flex items-center justify-center">
        <text class="text-gray-500">签到统计图表</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import Taro from '@tarojs/taro'

// 响应式数据
const distance = ref(325)
const canSignIn = ref(false)
const signButtonText = ref('立即签到')

// 签到记录
const signRecords = ref([
  {
    title: '早班打卡',
    time: '08:15',
    location: '金湖广场',
    status: '成功',
    success: true
  },
  {
    title: '早班打卡',
    time: '08:45',
    location: '金湖广场',
    status: '迟到',
    success: true
  },
  {
    title: '早班打卡',
    time: '--:--',
    location: '未签到',
    status: '缺卡',
    success: false
  }
])

// 定时器
let movementInterval: NodeJS.Timeout | null = null

// 获取状态颜色
const getStatusColor = (status: string) => {
  switch (status) {
    case '成功':
      return 'text-green-500'
    case '迟到':
      return 'text-orange-500'
    case '缺卡':
      return 'text-red-500'
    default:
      return 'text-gray-500'
  }
}

// 模拟用户移动
const simulateMovement = () => {
  if (distance.value > 50) {
    distance.value -= Math.floor(Math.random() * 20) + 5
    if (distance.value < 50) distance.value = 50
    
    // 当距离小于100米时启用签到按钮
    if (distance.value <= 100) {
      canSignIn.value = true
      signButtonText.value = `立即签到 (${distance.value}米)`
    }
  } else {
    if (movementInterval) {
      clearInterval(movementInterval)
    }
  }
}

// 签到
const handleSignIn = () => {
  if (!canSignIn.value) return
  
  const now = new Date()
  const hours = now.getHours().toString().padStart(2, '0')
  const minutes = now.getMinutes().toString().padStart(2, '0')
  const timeString = `${hours}:${minutes}`
  
  Taro.showToast({
    title: `签到成功！\n签到时间: ${timeString}\n签到地点: 南宁市青秀区金湖广场`,
    icon: 'success'
  })
  
  // 添加新的签到记录
  signRecords.value.unshift({
    title: '早班打卡',
    time: timeString,
    location: '金湖广场',
    status: '成功',
    success: true
  })
  
  // 更新按钮状态
  canSignIn.value = false
  signButtonText.value = '签到成功'
}

// 返回
const handleBack = () => {
  Taro.navigateBack()
}

// 历史记录
const handleHistory = () => {
  Taro.showToast({
    title: '查看历史记录',
    icon: 'none'
  })
}

// 筛选
const handleFilter = () => {
  Taro.showToast({
    title: '筛选功能',
    icon: 'none'
  })
}

// 生命周期
onMounted(() => {
  // 开始模拟移动
  setTimeout(() => {
    movementInterval = setInterval(simulateMovement, 1500)
  }, 2000)
})

onUnmounted(() => {
  if (movementInterval) {
    clearInterval(movementInterval)
  }
})
</script>